/**
 * @description  流动性控制
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { SecondHeaderC, NestedTableC, FirstHeaderC } from '../../../comps';
import ketou from '../../../assets/busi/reportingServices/tick_icon.png';
import buketou from '../../../assets/busi/reportingServices/cross_icon.png';
import Style from './style.less';

class liquidityRiskControl extends PureComponent {
  constructor() {
    super();
    this.state = {
      data: {},
      expandedRowKeys: [],
    };
  }

  componentDidMount() {
    this.props.onRef(this);
    const { searchData } = this.props;
    this.getData(searchData);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { searchData } = nextProps;

    if (JSON.stringify(searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData(searchData);
    }
  }

  //获取数据
  getData = (payload) => {
    this.props.dispatch({
      type: 'commercialBankReportM/getMobilityManagement',
      payload: {
        ...payload,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            data: data[0],
            expandedRowKeys: [],
          });
        } else {
          this.setState({
            data: {},
            expandedRowKeys: [],
          });
        }
      },
    });
  };

  onClearExpandedRowKeys = () => {
    this.setState({ expandedRowKeys: [] });
  };

  onNestedExtend = (expanded, record) => {
    const { expandedRowKeys } = this.state;
    let arr = [];

    if (expanded) {
      arr = expandedRowKeys.concat([record.id]);
    } else {
      arr = expandedRowKeys.filter((x) => x != record.id);
    }
    this.setState({ expandedRowKeys: arr.sort() });
  };

  render() {
    const { data, expandedRowKeys } = this.state;
    const { loading } = this.props;
    // 和现金报告那不一样，这里是1禁止0通过
    const iconInfo = {
      1: {
        className: 'prohibit',
        img: buketou,
        name: '禁止',
      },
      0: {
        className: 'adopt',
        img: ketou,
        name: '通过',
      },
    };
    return (
      <>
        <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
          <FirstHeaderC title='流动性风险控制' bottomHeight={false} />
        </div>

        {/* <Spin spinning={this.props.loading == true}> */}
        {data.msg && (
          <div name={'syyh-pdf'} style={{ marginBottom: '16px' }}>
            <SecondHeaderC
              title={data.msg}
              bottomHeight={false}
              Left={
                <div className={Style[iconInfo[data.state]?.className]} style={{ marginLeft: '20px' }}>
                  <img src={iconInfo[data.state]?.img} />
                  {iconInfo[data.state]?.name}
                </div>
              }
            />
          </div>
        )}
        {(data?.dataSource?.length != 0 || loading) && (
          <div name={'syyh-pdf'} className={'liquidityRiskControl'} isTable='true' style={{ marginBottom: '16px' }}>
            <NestedTableC
              columns={
                data.columns
                  ?.map((x) => {
                    if (x.key == 'productName') {
                      return {
                        ...x,
                        width: '500px',
                      };
                    }
                    if (x.key == 'value') {
                      return {
                        ...x,
                        type: 'money',
                      };
                    }
                    if (x.key == 'weight') {
                      return {
                        ...x,
                        align: 'right',
                      };
                    }
                    return x;
                  })
                  ?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }]) //添加空列，解决表头导出的样式问题
              }
              dataSource={data.dataSource?.map((x, index) => {
                const { nestedConfig, ...r } = x;
                if (nestedConfig) {
                  return {
                    ...x,
                    id: index,
                    nestedConfig: {
                      ...nestedConfig,
                      columns: nestedConfig.columns
                        ?.map((x) => {
                          if (x.key == 'productName') {
                            return {
                              ...x,
                            };
                          }
                          if (x.key == 'amount') {
                            return {
                              ...x,
                              type: 'number',
                              width: 200,
                            };
                          }
                          if (x.key == 'value') {
                            return {
                              ...x,
                              type: 'money',
                              width: 200,
                            };
                          }
                          if (x.key == 'productweight') {
                            return {
                              ...x,
                              align: 'right',
                              width: 150,
                            };
                          }
                          return { ...x, width: 150 };
                        })
                        ?.concat([{ dataIndex: 'konglie', title: '', width: 0, key: 'konglie', render: () => '' }]),
                    },
                  };
                } else {
                  return { ...r, id: index, nestedConfig: { columns: [], dataSource: [] } };
                }
              })}
              expandedRowKeys={expandedRowKeys}
              hidePage={true}
              rowKey={'id'}
              rowClassName={'table-row'}
              loading={loading}
              onExpand={this.onNestedExtend}
            ></NestedTableC>
          </div>
        )}
        {/* </Spin> */}
      </>
    );
  }
}
export default connect(({ commercialBankReportM, loading }) => ({
  commercialBankReportM,
  loading: loading.effects['commercialBankReportM/getMobilityManagement'],
}))(liquidityRiskControl);
